<li class="p-4 my-4 border border-accent lg:flex justify-between relative" id="<%= dom_id(address) %>">
  <%= render 'spree/shared/address', address: address %>
  <div class="flex gap-6 h-6 lg:h-10 mt-6 lg:mt-0">
    <div data-controller="modal" data-modal-allow-background-close="true">
      <%= button_tag type: "button", class: 'flex gap-2 lg:p-2', data: { action: "click->modal#open" } do %>
        <%= render 'spree/shared/icons/edit' %>
        <span class="uppercase text-sm font-semibold tracking-widest"><%= Spree.t(:edit) %></span>
      <% end %>
      <%= turbo_frame_tag "edit_address_modal_#{address.id}",
            src: spree.edit_address_path(address),
            loading: :lazy,
            data: {
              modal_target: "container", 
              action: "click->modal#closeBackground keyup@window->modal#closeWithKeyboard"
            },
            class: "hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center z-[9999]" %>
    </div>
    <div
                  data-controller="modal"
                  data-modal-allow-background-close="true"
                  data-modal-backdrop-color-value="rgba(0,0,0,0.32)"
                  >
      <button data-action="click->modal#open" class="flex p-2 max-lg:absolute top-2 right-2" data-test-id="delete_address">
        <%= render 'spree/shared/icons/delete' %>
      </button>
      <div
                    data-modal-target="container"
                    data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard"
        class="hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center z-[9999]"
        >
        <div class="w-full lg:w-[424px] relative">
          <div class="mx-4 lg:mx-0 bg-white">
            <div class="px-8 py-6">
              <div class="flex justify-end">
                <button data-action="click->modal#close">
                  <%= render 'spree/shared/icons/close' %>
                  <span class="sr-only"><%= Spree.t(:close) %></span>
                </button>
              </div>
              <h2 class="text-xl lg:text-2xl my-4 uppercase"><%= Spree.t(:delete_address) %></h2>
              <p class="mb-8"><%= Spree.t(:are_you_sure) %></p>
              <div class="flex justify-end items-center flex-wrap mt-4 gap-4">
                <%= button_tag Spree.t(:cancel), class: 'uppercase text-sm font-semibold tracking-widest', data: { action: 'click->modal#close' } %>
                <%= button_to Spree.t(:delete), spree.address_path(address), method: :delete, class: 'btn-primary !px-6 !py-3 !leading-[1.375rem]', data: { test_id: 'confirm_delete_address' } %>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</li>
